<div class="card">
    <div data-th-include="vc/meeting/meetingAdd"></div>
    <div data-th-include="vc/meeting/meetingDelete"></div>
    <div data-th-include="vc/meeting/meetingDetail"></div>
    <div data-th-include="vc/meeting/meetingCopy"></div>
    <div data-th-include="vc/meeting/meetingLock"></div>
    <!-- Tpv zhongxiang.huang 20181226 add -->
	<div data-th-include="vc/meeting/meetingWechatInvite"></div>
    <!-- modify by aaron.wei 2018.12.29 -->
    <div class="tpv-main-header clearfix">
        <div class="tpv-main-tab j-main-tab"></div>
        <div id="data-table_filter" class="dataTables_filter tpv-main-filter">
            <form class="meeting-table-form">
                <div class="tpv-filter-layout">
                	<div class="tpv-filter-item">
                        <div class="input-group">
                        <!-- chaohung , 20190107  -->
                            <span class="input-group-addon" data-th-text="#{meeting.list.date} +'： '" style="font-size:14px;color:#000;"></span>
                            <div class="form-group">
                                <input type="hidden" name="meeting-filter-start-date-link" id="meeting-filter-start-date-link"/>
                                <input class="form-control tpv-date-picker" type="text" id="meeting-filter-start-date" data-link-field="meeting-filter-start-date-link" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd" autocomplete="off" readonly/>
                            </div>
                            <span class="input-group-addon tpv-label-space" style="font-size:14px;color:#000;"> - </span>
                            <div class="form-group">
                                <input type="hidden" name="meeting-filter-end-date-link" id="meeting-filter-end-date-link"/>
                                <input class="form-control tpv-date-picker" type="text" id="meeting-filter-end-date" data-link-field="meeting-filter-end-date-link" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd" autocomplete="off" readonly/>
                            </div>
                        </div>
                    </div>
                
                    <div class="tpv-filter-item tpv-sm-filter-item">
                        <div class="input-group">
                        <!-- chaohung , 20190107  -->
                            <span class="input-group-addon" data-th-text="#{meeting.list.room} +'： '" style="font-size:14px;color:#000;"></span>
                            <div class="form-group">
                                <select class="form-control" name="meeting-filter-room-id">
                                    <option  value="" data-th-text="#{meeting.select.hint.room}"></option>
                                    <option  th:each="meetingRoom:${meetingRooms}" th:value="${meetingRoom.roomId}" th:text="${meetingRoom.meetingRoomName}"></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tpv-filter-item tpv-sm-filter-item">
                        <div class="input-group">
                        <!-- chaohung , 20190107  -->
                            <span class="input-group-addon" data-th-text="#{meeting.list.topic} +'： '" style="font-size:14px;color:#000;"></span>
                            <div class="form-group">
                                <input type="text" name="meeting-filter-topic" class="form-control" maxlength="80" onchange="search()"> <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tpv-filter-item tpv-sm-filter-item">
                        <div class="input-group">
                        <!-- chaohung , 20190107  -->
                            <span class="input-group-addon" data-th-text="#{meeting.list.reservations} +'： '" style="font-size:14px;color:#000;"></span>
                            <div class="form-group">
                                <select class="form-control" name="meeting-filter-user-id">
                                    <option  value="" data-th-text="#{meeting.select.hint.reservations}"></option>
                                    <option  th:each="user:${users}" th:value="${user.userId}" th:text="${user.username}"></option>
                                </select>
                            </div>
                        </div>
                    </div>
                                        
                    <!--add by Ting.Wong 2018-12-26 15:45 start-->
                    <div class="tpv-filter-item tpv-sm-filter-item" >
                        <div class="input-group">
                        <!-- chaohung , 20190107  -->
                            <span class="input-group-addon" data-th-text="#{meeting.list.id} +'： '" style="font-size:14px;color:#000;"></span>
                            <div class="form-group">
                                <input type="text" name="meeting-filter-meetingId" class="form-control" maxlength="80" onchange="search()"> <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                    <!--add by Ting.Wong 2018-12-26 15:45 end-->
                    <!-- add by aaron.wei 2018.12.29 -->
                    <div class="tpv-filter-item tpv-filter-auto" style="margin-left:24px">
                        <button type="button" class="btn tpv-btn-warning" onclick="refresh()" th:title="#{common.btn.reset}" style="width:75px">[[#{common.btn.reset}]]</button>
                    </div>
                    <!-- end -->
                </div>
            </form>
        </div>
    </div>
    <!-- end -->
    <div class="card-block">
        <div class="table-responsive">
            <div id="data-table_wrapper" class="dataTables_wrapper">
                <div class="dataTables_buttons hidden-sm-down actions tpv-table-btns clearfix">
                    <div class="tpv-table-group-btns clearfix">
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="search()" style="min-width:75px;">[[#{user.flush}]]</button>
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="editMeeting()" style="min-width:75px">[[#{meeting.option.edit}]]</button>
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="editRepeatMeeting()" style="min-width:75px">[[#{meeting.option.repeat.edit}]]</button>
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="deleteMeeting()" style="min-width:90px">[[#{meeting.option.delete}]]</button>
                    </div>
                    <div class="tpv-table-info-other">
                        <button type="button" class="btn tpv-btn-primary btn-secondary" onclick="addMeeting()" style="width:96px">[[#{meeting.option.add}]]</button>
                    </div>
                    <!--<div class="tpv-table-group-toggle">-->
                        <!--<div class="btn-group btn-group-toggle" data-toggle="buttons" id="filter_state">-->
                            <!--<label class="btn btn-save" style="min-width:75px;">-->
                                <!--<input type="radio" name="state" value="0" data-th-text="#{meeting.list.tojoin}" ><span id="toBeJoin" ></span>-->
                            <!--</label>-->
                            <!--<label class="btn btn-save" style="min-width:75px;">-->
                                <!--<input type="radio" name="state" value="1" data-th-text="#{meeting.list.joined}"><span id="joined"></span>-->
                            <!--</label>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
                <table id="meetingTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
            </div>
        </div>
    </div>
</div>
<script data-th-src="@{js/app/vc/meeting/meeting.js(t=${version})}"></script>
<!-- chaohung , 20190108 -->
<script type="text/x-handlebars-template" id="meeting-detail-template" style="text-align:center;">
    <div class="meeting-detail-box">
        <div>
           <a href="javascript:void(0)" class="meeting-detail" title="{{name}}" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 160px; display: block; text-align:center;">{{name}}</a>
        </div>
    </div>
</script>
<!-- chaohung , 20190108 -->
<script type="text/x-handlebars-template" id="meeting-content-template" style="text-align:center;">
    <div class="meeting-detail-box">
        <div>
            <div class="meeting-content" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: block; width: 240px; text-align:center;">{{content}}</div>
        </div>
    </div>
</script>